<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<f:view contentType="text/html">

	<h:head>
        <f:facet name="first">
            <meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
			<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
	     	<title>Shop around</title>
        </f:facet>
		<link rel="stylesheet" href="#{request.contextPath}/css/style.css" type="text/css" media="all" />
		<!--[if lte IE 6]><link rel="stylesheet" href="../css/ie6.css" type="text/css" media="all" /><![endif]-->
		<!-- 
		<script src="#{request.contextPath}/js/jquery-1.7.min.js" type="text/javascript"></script>
		<script src="#{request.contextPath}/js/jquery.jcarousel.pack.js" type="text/javascript"></script>
		<script src="#{request.contextPath}/js/jquery-func.js" type="text/javascript"></script>
     	 -->
        
        <link type="text/css" rel="stylesheet" href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />

		<ui:insert name="head"></ui:insert>
	</h:head>

	<script>
		
		/*
			E' un trucco per aggiungere la classe CSS alla categoria selezionata dal menu in alto
			confrontando l'ultima parte dell'url visualizzato nel browser e il contenuto degli attributi
			href nei link del div navigation. (UOMO, DONNA...etc..)
		*/
		function addActiveClassAtTopNavigationMenu()
		{
			/*window.location.href restituisce tutto l'URL del browser da http://...etc..
			Questo però crea problemi a jQuery per il confronto completo degli URL.
			Probabilmente la string è troppo lunga, quindi viene presa la sottostringa a 
			destra che serve per identificare univocamente la posizione della navigazione.
			*/
			var lastHrefRightPart = window.location.href.substring(window.location.href.length / 2); 
			//console.debug($("#navigation > ul > li > a[href*='" + lastHrefRightPart +"']"));
			$($("#navigation > ul > li > a[href!='" + lastHrefRightPart +"']")).removeClass("active");
			$($("#navigation > ul > li > a[href*='" + lastHrefRightPart +"']")).addClass("active");
			
		
		}
	</script>

	<h:body onload="addActiveClassAtTopNavigationMenu()">


			<!-- Shell -->
			<div class="shell">
			  <!-- Header -->
			  <div id="header">
			    <h1 id="logo"><a href="#{request.contextPath}/store">shoparound</a></h1>
			    <!-- Cart -->
			    <div id="cart"> <a href="#{request.contextPath}/main/cartSummary.jsf" class="cart-link">Shopping Bag</a>
			      <div class="cl">&nbsp;</div>
			      	<!-- <p:panel id="cartDiv">  -->
			      		<h:panelGrid id="cartDiv">
			      		
			      		<span>Articoli scelti: <strong>#{shop.cart.size}</strong></span> &nbsp;&nbsp; <span>Totale: <strong>€ #{shop.cart.totalCost} </strong></span>
			      		</h:panelGrid>
					<!-- <p:panel>  -->
			     </div>
			    
			    <!-- End Cart -->
			    <!-- Navigation -->
			    <div id="navigation">
			      <ul>
			        <li> 	
			        	<a href="#{request.contextPath}/store/uomo" title="uomo" > Uomo </a> 
			        </li>
			        
			        <li> 
			        	<a href="#{request.contextPath}/store/donna" title="donna"> Donna </a> 
			        </li>
			       
			       
			        <li><a href="#">My Account</a></li>
			        <li><a href="#">The Store</a></li>
			        <li><a href="#">Contact</a></li>
			      </ul>
			    </div>
			    <!-- End Navigation -->
			  </div>
			  <!-- End Header -->
			  <!-- Main -->
			  <div id="main">
			  <ui:include src="#{request.contextPath}/../main/breadcrumb.xhtml" />
			   
			    <div class="cl">&nbsp;</div>
			    															<!-- Content -->
			    <div id="content">
			      
			      <ui:insert name="content">...</ui:insert>
			      
			     
			     
			     
			      <!-- End Products -->
			    </div>
			    <!-- End Content -->
			    <!-- Sidebar -->
			    <div id="sidebar">
			      <!-- Search -->
			      
			     <ui:include src="#{request.contextPath}/../main/leftSearchPanel.xhtml" />
			      <!-- End Search -->
			      <!-- Categories -->
			      <h:form>
				      <div class="box categories">
				        <h2>Categories <span></span></h2>
				        <div class="box-content">
				          <ul>
				            <li>
				            <!--  <a href="../index.html">Man</a>  
							    <h:commandLink value="Man" action="#{shop.showManCategory}">
							    </h:commandLink>
						    -->
						    <a href="#{request.contextPath}/main/searchResult.jsf?categoryID=1"> Man </a>
				            </li>
				            
				            
				            <li>
				            	<a href="#{request.contextPath}/main/searchResult.jsf?categoryID=2"> Woman </a>
				            	
				            </li>
				            
				            <!--   <li class="last"><a href="#">Category 13</a></li> -->
				          </ul>
				        </div>
				      </div>
			      </h:form>
			      <!-- End Categories -->
			    </div>
			    <!-- End Sidebar -->
			    <div class="cl">&nbsp;</div>
			  </div>
			  <!-- End Main -->
			  <!-- Side Full -->
			  <div class="side-full">
			    <!-- More Products -->
			    <div class="more-products">
			      <div class="more-products-holder">
			        <ul>
			          <li><a href="#"><img src="../css/images/small1.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small2.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small3.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small4.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small5.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small6.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small7.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small1.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small2.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small3.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small4.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small5.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small6.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small7.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small1.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small2.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small3.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small4.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small5.jpg" alt="" /></a></li>
			          <li><a href="#"><img src="../css/images/small6.jpg" alt="" /></a></li>
			          <li class="last"><a href="#"><img src="../css/images/small7.jpg" alt="" /></a></li>
			        </ul>
			      </div>
			      <div class="more-nav"> <a href="#" class="prev">previous</a> <a href="#" class="next">next</a> </div>
			    </div>
			    <!-- End More Products -->
			    <!-- Text Cols -->
			    <div class="cols">
			      <div class="cl">&nbsp;</div>
			      <div class="col">
			        <h3 class="ico ico1">Donec imperdiet</h3>
			        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet, metus ac cursus auctor, arcu felis ornare dui.</p>
			        <p class="more"><a href="#" class="bul">Lorem ipsum</a></p>
			      </div>
			      <div class="col">
			        <h3 class="ico ico2">Donec imperdiet</h3>
			        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet, metus ac cursus auctor, arcu felis ornare dui.</p>
			        <p class="more"><a href="#" class="bul">Lorem ipsum</a></p>
			      </div>
			      <div class="col">
			        <h3 class="ico ico3">Donec imperdiet</h3>
			        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet, metus ac cursus auctor, arcu felis ornare dui.</p>
			        <p class="more"><a href="#" class="bul">Lorem ipsum</a></p>
			      </div>
			      <div class="col col-last">
			        <h3 class="ico ico4">Donec imperdiet</h3>
			        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec imperdiet, metus ac cursus auctor, arcu felis ornare dui.</p>
			        <p class="more"><a href="#" class="bul">Lorem ipsum</a></p>
			      </div>
			      <div class="cl">&nbsp;</div>
			    </div>
			    <!-- End Text Cols -->
			  </div>
			  <!-- End Side Full -->
			  <!-- Footer -->
			  <div id="footer">
			    <p class="left"> <a href="#">Home</a> <span>|</span> <a href="#">Support</a> <span>|</span> <a href="#">My Account</a> <span>|</span> <a href="#">The Store</a> <span>|</span> <a href="#">Contact</a> </p>
			    <p class="right"> &copy; 2010 Shop Around. Design by <a href="http://chocotemplates.com">Chocotemplates.com</a> </p>
			  </div>
			  <!-- End Footer -->
			</div>
			<!-- End Shell -->
	</h:body>


</f:view>
</html>